<template>
	<div class="steps">
		<login-title></login-title>
		<el-button class="return" type="primary" @click="$router.back(-1)">返回</el-button>
		<div class="inner">
			<h3>密码找回</h3>
			<el-steps class="stepsGroup" :active="active" process-status="process" finish-status="success">
				<el-step title="输入账号"></el-step>
				<el-step title="验证码验证"></el-step>
				<el-step title="新密码设置"></el-step>
			</el-steps>
			<div class="warp">
				<ul class="toggleInner">
					<li>
						<el-input class="email" type="text" v-model.trim="phone" placeholder="请输入账号"></el-input>
					</li>
					<li>
						<el-input class="yzm" v-model.trim="emailYzm" placeholder="请输入验证码"></el-input>
						<p class="subtext">验证码已发送至邮箱<span>{{phoneEmail}}</span>&nbsp;&nbsp;&nbsp;没有收到验证码？
							<el-button size="mini" class="btn-sub" @click="timess" :disabled="timesShow">{{times}}</el-button>
						</p>
					</li>
					<li>
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="ruleForm">
							<el-form-item label="" prop="newpasswored">
								<el-input type="password" @change="changPsw" v-model.trim="ruleForm.newpasswored" placeholder="新密码输入" minlength="6"
								 maxlength="18"></el-input>
							</el-form-item>
							<el-form-item label="" prop="renewpasswored">
								<el-input type="password" @change="changPsw" v-model.trim="ruleForm.renewpasswored" placeholder="再次输入新密码" minlength="6"
								 maxlength="18"></el-input>
							</el-form-item>
							<!-- <el-input type="password"  v-model="ruleForm.renewpasswored" placeholder="再次输入新密码"></el-input> -->
						</el-form>
					</li>
				</ul>
			</div>

			<el-button class="subBtn" type="primary" :disabled="step1Status" @click.native="next">{{btnText}}</el-button>
		</div>

	</div>
</template>
<script>
import loginTitle from './view/logoDiv'
import {
	veriAccount,
	verifiphone,
	verificode,
	forgetPassword
} from '../api/getData'

export default {
	name: 'steps',
	data: function() {
		/* var validatePass1 = (rule, value, callback) => {
			if (value === '') {
				this.step1Status = true
				callback(new Error('请再次输入密码'));
			} else if (!/^[0-9A-Za-z]{6,18}$/.test(value)) {
				this.step1Status = true
				callback(new Error('密码少于6位'));
			} else {
				callback();
			}
		}; */
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				this.step1Status = true
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.newpasswored) {
				this.step1Status = true
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			active: 0,
			phone: '',
			emailYzm: '',
			yzmStatus: true,
			token: '',
			eamil: '',
			step1Status: false,
			btnText: '下一步',
			phoneEmail: '',
			times: '重新发送',
			timesShow: false,
			ruleForm: {
				newpasswored: '',
				renewpasswored: '',
			},
			rules: {
				newpasswored: [{
						required: true,
						// validator: validatePass1,
						message: '新密码不能为空',
						trigger: ['blur', 'change']
					},
					{
						min: 6,
						max: 18,
						message: '长度在 6 到 18 个字符',
						trigger: ['blur', 'change']
					}
				],
				renewpasswored: [{
						validator: validatePass2,
						trigger: ['blur', 'change']
					},
					{
						required: true,
						message: '密码不能为空',
						trigger: ['blur', 'change']
					}
				]
			}
		}
	},
	components: {
		loginTitle
	},
	created: function() {}, // 创建时
	beforeMount: function() {}, // 挂载之前
	mounted: function() {

	}, // 挂载之后
	beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
	updated: function() {}, // 数据更新后,渲染后调用(禁止)
	beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
	destroyed: function() {}, // 实例销毁后调用
	methods: {
		timess() {
			var s = 60
			veriAccount({
				'contactway': this.phone
			}).then((data) => {
				let $data = data.data
				if ($data.code === 0) {
					this.phoneEmail = $data.data.mail
					this.token = $data.data.token
					this.eamil = $data.data.mail
					this.yzmStatus = false
				} else {
					this.yzmStatus = true
					this.$message({
						type: 'error',
						message: $data.msg
					})
				}
			})
			clearInterval(timer)
			var timer = setInterval(() => {
				this.timesShow = true
				s--
				this.times = s + 's'
				if (s === 0) {
					this.timesShow = false
					// this.yzmText = '获取验证码'
					this.times = '重新发送'
					s = 0
					clearInterval(timer)
				}

			}, 1000)
		},
		next() {
			this.step1Status = true
			/*验证账号*/
			let reg = /^[1][3,4,5,7,8][0-9]{9}$/
			let $ul = document.querySelector('.toggleInner')
			if (this.active === 0) {
				if (reg.test(this.phone)) {
					veriAccount({
						'contactway': this.phone
					}).then((data) => {
						this.step1Status = false
						let $data = data.data
						if ($data.code === 0) {
							this.phoneEmail = $data.data.mail
							this.token = $data.data.token
							this.eamil = $data.data.mail
							this.yzmStatus = false
							$ul.style.transform = 'translateX(-' + (Math.abs(this.active - 1) * 600) + 'px)'
							this.active++

						} else {

							this.yzmStatus = true
							this.$message({
								type: 'error',
								message: $data.msg
							})
						}
					})
				} else {
					this.step1Status = false
					this.$message({
						type: 'error',
						message: '账号格式错误'
					})
				}
			}

			//验证账户通过
			if (this.active === 1) {
				console.log(this.active, "111")
				/* this.active++
				$ul.style.transform = 'translateX(-' + (Math.abs(this.active) * 600) + 'px)' */

				verificode({
					'code': this.emailYzm,
					'token': this.token
				}).then((data) => {
					this.step1Status = false
					let $data = data.data
					console.log($data)
					if ($data.code === 0) {
						this.active++
						$ul.style.transform = 'translateX(-' + (Math.abs(this.active) * 600) + 'px)'
						this.timesShow = true
					} else {
						this.$message({
							type: 'error',
							message: '验证失败'
						})
					}
				})

			}
			//设置密码
			if (this.active === 2) {
				// this.step1Status = true
				if (this.ruleForm.newpasswored !== this.ruleForm.renewpasswored) {
					this.$message({
						type: 'error',
						message: '密码输入不一致！'
					})
				} else {
					this.step1Status = false
					if (this.ruleForm.newpasswored && this.ruleForm.renewpasswored) {
						forgetPassword({
							'account': this.phone,
							'password': this.ruleForm.renewpasswored
						}).then((data) => {
							this.step1Status = false
							let $data = data.data
							if ($data.code === 0) {
								this.active++
								this.$message({
									type: 'success',
									message: $data.msg
								})
								setTimeout(() => {
									this.$router.push('/')
								}, 1000)

							} else {
								this.$message({
									type: 'error',
									message: $data.msg
								})
							}
						})
					}
				}
			}


		},
		changPsw(e) {
			if (this.ruleForm.newpasswored.length >= 6 && this.ruleForm.renewpasswored.length >= 6 && this.ruleForm.newpasswored ===
				this.ruleForm.renewpasswored) {
				this.step1Status = false
			} else {
				this.step1Status = true
			}
		}

	} // 函数
}
</script>
<style lang='scss'>
	.steps {
		position: relative;
		width: 100vw;
		height: 100vh;
		background: url(../assets/img/pass-bg.jpg) 0 0 no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.return {
			position: absolute;
			top: 60px;
			right: 20%;
			padding: 12px 40px;
			letter-spacing: 2px;
		}

		.inner {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			h3 {
				font-size: 18px;
				margin-bottom: 40px;
				margin-left: 60px;
			}

			.stepsGroup {
				width: 100%;

				.is-horizontal {
					position: relative;
				}

				.el-step__line {
					width: 150px;
					left: 120px;
				}

				/* // .is-text {
        //   // border: 1px solid rgba(176, 184, 191, 0.85);
        //   .el-step__icon-inner {
        //     // color: rgba(176, 184, 191, 0.85);
        //     font-weight: normal;
        //   }
        // } */
				.is-success {
					font-size: 14px;
					font-weight: bold;
					color: #000;

					.el-step__line {
						.el-step__line-inner {
							border-color: #328EF9;
						}
					}

					.is-text {
						background-color: #328EF9;

						.el-step__icon-inner {
							color: #fff;
						}
					}
				}

				.steps .inner .stepsGroup .is-text .el-step__icon-inner {
					border: #fff;
				}

				.el-step__main {
					width: 100px;
					position: absolute;
					left: 30px;
					top: -8px;
					z-index: 9999;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.85);
					font-weight: normal;

					.is-process {
						font-size: 14px;
						color: rgba(0, 0, 0, 0.85);
					}

					.is-wait {
						font-size: 14px;
					}
				}
			}

			.warp {
				width: 600px;
				padding: 10px 0;
				overflow: hidden;
			}

			.toggleInner {
				width: 1800px;
				margin-left: 5%;
				overflow: hidden;
				transition: all 0.5s;

				li {
					float: left;
					width: 600px;
					padding: 10px 0;

					.el-input {
						margin: 20px 0 10px 0;
						text-align: center;

						.el-input__inner {
							width: 60%;
							height: 40px;
							line-height: 40px;
							box-sizing: border-box;
							padding-left: 36px;
							/* margin-left: 20%; */
						}
					}

					.error1 {
						font-size: 12px;
						color: #D94356;
						margin-left: 20%;
					}

					.email {
						.el-input__inner {
							background: #fff url(../assets/img/mail_icon.png) 14px center no-repeat;
						}
					}

					&:nth-child(2) {
						.el-input__inner {
							background: #fff url(../assets/img/yzm_icon.png) 14px center no-repeat;
						}

						.subtext {
							color: #ccc;
							font-size: 12px;
							margin-left: 20%;

							span {
								color: #328EF9;
								cursor: pointer;
							}
						}
					}

					&:nth-child(3) {
						.error3 {
							font-size: 12px;
							color: #D94356;
							margin-left: 20%;
						}

					}
				}
			}

			.subBtn {
				width: 368px;
				height: 40px;
				width: 100%;
				margin-left: 10%;

			}

			.ruleForm {
				.el-form-item {
					margin-bottom: 4px;
				}

				.el-form-item__error {
					margin-left: 20%;
					padding-top: 0;
				}
			}
		}

	}
</style>
